<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetstore</title>

</head>
<body>
    <div th:replace="common/top"></div>
    <div id="Content">
        <div id="Welcome">
            <div id="WelcomeContent">

<!--                <c:if test="${sessionScope.account != null }">-->
<!--                    <c:if test="${sessionScope.account.authenticated}">-->
<!--                        Welcome ${sessionScope.account.firstName}!-->
<!--                    </c:if>-->
<!--                </c:if>-->

                <span th:if="${session.account} != null">
                    <span th:if="${session.account.authenticated == true}">
                        Welcome <span th:text="${session.account.firstName}"></span>
                    </span>
                </span>


            </div>
        </div>

        <div id="Main">
            <div id="Sidebar">
                <div class="SidebarContent">
                    <a href="/catalog/viewCategory?categoryId=FISH"><img src="../images/fish_icon.gif" /></a>
                    <br/> Saltwater, Freshwater <br/>
                    <a href="/catalog/viewCategory?categoryId=DOGS"><img src="../images/dogs_icon.gif" /></a>
                    <br /> Various Breeds <br />
                    <a href="/catalog/viewCategory?categoryId=CATS"><img src="../images/cats_icon.gif" /></a>
                    <br /> Various Breeds, Exotic Varieties <br />
                    <a href="/catalog/viewCategory?categoryId=REPTILES"><img src="../images/reptiles_icon.gif" /></a>
                    <br /> Lizards, Turtles, Snakes <br />
                    <a href="/catalog/viewCategory?categoryId=BIRDS"><img src="../images/birds_icon.gif" /></a>
                    <br /> Exotic Varieties
                </div>
            </div>

<!--            <script type="text/javascript" src="js/HoverLayerController_MainPage.js"></script>-->
            <div id="MainImage">
                <div id="MainImageContent">
                    <div id="HoverSideBar" > <!-- 悬浮窗 -->
                        <img>
                        <div id="HoverSidebarContent"></div>
                    </div>
                    <map name="estoremap">
                        <area alt="Birds" coords="72,2,280,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" onmouseover="showHoverLayer(alt)" onmouseout="concealHoverSideBar()"/>
                        <area alt="Fish" coords="2,180,72,250" href="/catalog/viewCategory?categoryId=FISH" shape="rect" onmouseover="showHoverLayer(alt)" onmouseout="concealHoverSideBar()"/>
                        <area alt="Dogs" coords="60,250,130,320" href="/catalog/viewCategory?categoryId=DOGS" shape="rect" onmouseover="showHoverLayer(alt)" onmouseout="concealHoverSideBar()"/>
                        <area alt="Reptiles" coords="140,270,210,340" href="/catalog/viewCategory?categoryId=REPTILES" shape="rect" onmouseover="showHoverLayer(alt)" onmouseout="concealHoverSideBar()"/>
                        <area alt="Cats" coords="225,240,295,310" href="/catalog/viewCategory?categoryId=CATS" shape="rect" onmouseover="showHoverLayer(alt)" onmouseout="concealHoverSideBar()"/>
                        <area alt="Birds" coords="280,180,350,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" onmouseover="showHoverLayer(alt)" onmouseout="concealHoverSideBar()"/>
                    </map>
                    <img height="355" src="../images/splash.gif" align="middle" usemap="#estoremap" width="350" />
                </div>
            </div>
            
            <div id="Separator">&nbsp;</div>
        </div>
    </div>
    <div th:replace="common/bottom"></div>
</body>
</html>